HTML5 的自定義屬性

TLDR

• data-* 屬性是 HTML5 標準，用於儲存自定義資料，不會觸發驗證警告。
• JavaScript 使用 dataset API 存取，屬性名稱會自動轉換為小駝峰命名法（lower camel case）。
• jQuery 的 data() 方法並非直接操作 DOM 屬性，而是將資料存放在 jQuery.cache 中。
• dataset 僅支援字串型別，而 jQuery data() 會自動轉換型別（如數字、JSON 物件）。
• 若需存取自定義屬性，建議區分情境：現代開發建議使用原生 dataset，若需處理複雜資料型別或舊瀏覽器相容性，則可考慮 jQuery data()。

HTML5 自定義屬性概論

在 HTML5 規範中，允許使用 data- 開頭的屬性來儲存自定義資訊。這類屬性在 HTML 文件中是合法的，不會導致驗證工具報錯。

• 什麼情況下會遇到這個問題：當開發者需要在 HTML 元素上掛載額外資訊，但又不希望違反 W3C 規範時。

JavaScript 的 dataset API

在 JavaScript 中，除了使用 getAttribute() 存取外，瀏覽器會將 data- 屬性映射至 DOM 物件的 dataset 屬性（型別為 DOMStringMap）。

• 什麼情況下會遇到這個問題：當需要以原生 JavaScript 存取 HTML 元素上的自定義資料時。

屬性名稱轉換規則

dataset 會自動將 HTML 中的屬性名稱轉換為 JavaScript 的屬性名稱：

1. 移除 data- 前綴。
2. 移除剩餘名稱中的所有 -。
3. 將 - 後的字母轉為大寫（小駝峰命名法）。

例如：HTML 中的 data-cloudy-wing，在 JavaScript 中需透過 {DOM object}.dataset.cloudyWing 存取。

jQuery 的 data() 方法

jQuery 的 data() 方法與原生 dataset 機制完全不同。它將資料儲存在 jQuery.cache 中，而非直接操作 DOM Property。

• 什麼情況下會遇到這個問題：當專案依賴 jQuery，且需要自動處理資料型別轉換（如自動將字串轉為數字或 JSON 物件）時。

核心差異與注意事項

• 儲存機制：data() 僅在初次讀取時會去讀取 HTML 的 data-* 屬性，後續的存取皆是針對 jQuery.cache。
• 型別轉換：data() 會自動判斷資料型別。若屬性值為 JSON 字串，需注意格式要求：

  data-wing='{"name": "wing", "height": 177}'

  JSON 字串外層必須使用單引號，內部屬性名稱必須使用雙引號，data() 才能正確將其解析為 Object。
• 版本差異：在 jQuery 1.8 之後，數字開頭的字串（如 012.050）會被認定為字串而非數字，以保留原始資料。

WARNING

此建議基於 jQuery 時代背景。在現代前端框架（如 Vue, React）盛行的環境下，建議優先使用框架提供的狀態管理機制，而非直接操作 DOM 的 data-* 屬性。

異動歷程

• 2024-03-09 初版文件建立。